<template>
  <GanttView
    :grid="{ columns, ganttViewInnerShow: false, showCheckColumn: true, showSetColumn: true, showActionColumn: true }"
    :gantt-data="{ task, links }"
    :project-date="{ start_date: '2023-01-02', end_date: '2023-02-24' }"
  />
</template>

<script setup lang="ts">
import { v4 as uuidv4 } from "uuid"
import GanttView from "./gantt.vue"

//每条任务数据格式
interface TaskItem {
  id: string | number //任务id
  text: string //任务名称
  start_date: string //开始日期
  end_date: string //结束日期
  progress: number //进度  0 ~ 1
  person: string //负责人
  status: number //状态
  //  前端依据status和parent处理，无需后台返回
  color: string //进度条颜色， 手动设置 {  父任务：#ebeef5。 子任务 => 已完成：#52c41a，进行中：1890ff，已延期： #ff4d4f}
  parent?: string | number //父任务id,是子任务必须有该熟悉
  [propName: string]: any
}

//每条任务依赖线数据格式
interface LinkItem {
  id: string | number
  source: string | number
  target: string | number
  type?: number
  [propName: string]: any
}
//后期写到枚举文件里面
const statusObj = {
  0: "未开始",
  1: "进行中",
  2: "已完成",
  3: "已延期",
}

const typeObj = {
  1: "普遍任务",
  2: "执行任务",
}

const columns = [
  {
    name: "text",
    label: "任务标题",
    width: 180,
    tree: true,
    align: "center",
  },
  {
    name: "progressText",
    label: "进度",
    width: 90,
    align: "center",
  },
  {
    name: "status",
    label: "状态",
    width: "90",
    align: "center",
  },
  {
    name: "person",
    label: "负责人",
    width: 150,
    align: "center",
  },
  {
    name: "typeText",
    label: "类型",
    width: 150,
    align: "center",
  },
  {
    name: "start_date",
    label: "开始日期",
    width: 100,
    align: "center",
  },
  {
    name: "end_date",
    label: "完成时间",
    width: 100,
    align: "center",
  },
]
let task = ref([]) // 用reactive  子组件 props.data 监听不到哦， 因为你直接改地址了
let links = ref([])

setTimeout(() => {
  const data = [
    {
      id: 10,
      text: "vue项目",
      start_date: "2023-02-02",
      end_date: "2023-02-04",
      progress: 1,
      person: "测试人员",
      status: 1,
      color: "#ebeef5", //进度图的颜色, 主任务进度，总进度条, 【主任务不需要设置进度条颜色，采用color字段配置】
      type: 1,
    },
    {
      id: 1,
      text: "任务1",
      start_date: "2023-02-01",
      end_date: "2023-01-31",
      progress: 1,
      person: "张三",
      status: 1,
      color: "#ebeef5", //进度图的颜色, 主任务进度，总进度条, 【主任务不需要设置进度条颜色，采用color字段配置】
      type: 1,
      children: [
        {
          id: 11,
          text: "任务1-1",
          start_date: "2023-01-02",
          end_date: "2023-01-10",
          progress: 0.5,
          parent: 1, //父任务id
          person: "李四",
          status: 2,
          color: "#52c41a",
          type: 2,
        },
        {
          id: 12,
          text: "任务1-2",
          start_date: "2023-01-11",
          end_date: "2023-01-20",
          progress: 1,
          parent: 1, //父任务id
          person: "小明",
          status: 2,
          color: "#52c41a",
        },
        {
          id: 13,
          text: "任务1-3",
          start_date: "2023-01-21",
          end_date: "2023-01-28",
          progress: 1,
          parent: 1, //父任务id
          person: "张三",
          status: 2,
          color: "#52c41a",
        },
        {
          id: 14,
          text: "任务1-4",
          start_date: "2023-01-29",
          end_date: "2023-01-31",
          progress: 1,
          parent: 1, //父任务id
          person: "小海",
          status: 2,
          color: "#52c41a",
        },
      ],
    },
    {
      id: 2,
      text: "任务2",
      start_date: "2023-02-01",
      end_date: "2023-02-28",
      progress: 0.5,
      person: "张三",
      status: 1,
      color: "#ebeef5", //进度图的颜色, 主任务进度，总进度条
      children: [
        {
          id: 20,
          text: "任务2-1",
          start_date: "2023-02-01",
          end_date: "2023-02-28",
          progress: 0.5,
          parent: 2, //父任务id
          person: "小海",
          status: 2,
          color: "#1890ff",
        },
      ],
    },
    {
      id: 3,
      text: "任务3",
      start_date: "2023-01-10",
      end_date: "2023-01-20",
      progress: 0.5,
      person: "张三",
      status: 1,
      color: "#ebeef5", //进度图的颜色, 主任务进度，总进度条
    },
    {
      id: 4,
      text: "任务4",
      start_date: "2023-02-01",
      end_date: "2023-02-28",
      progress: 0.5,
      person: "张三",
      status: 1,
      color: "#ebeef5", //进度图的颜色, 主任务进度，总进度条
      children: [
        {
          id: 41,
          text: "任务4-1",
          start_date: "2023-02-01",
          end_date: "2023-02-10",
          progress: 0.3,
          parent: 4, //父任务id
          person: "小海",
          status: 2,
          color: "#1890ff",
        },
        {
          id: 42,
          text: "任务4-2",
          start_date: "2023-02-10",
          end_date: "2023-02-20",
          progress: 0.3,
          parent: 4, //父任务id
          person: "小海",
          status: 2,
          color: "#ff4d4f",
        },
      ],
    },
    {
      id: 5,
      text: "任务五",
      start_date: "2023-01-01",
      end_date: "2023-02-28",
      progress: 0.5,
      person: "张三",
      status: 1,
      color: "#ebeef5", //进度图的颜色, 主任务进度，总进度条
    },
    {
      id: 6,
      text: "任务六",
      start_date: "2023-01-01",
      end_date: "2023-10-01",
      progress: 0.5,
      person: "张三",
      status: 1,
      color: "#ebeef5", //进度图的颜色, 主任务进度，总进度条
      children: [
        {
          id: 100,
          text: "任务1-1",
          start_date: "2023-01-02",
          end_date: "2023-01-10",
          progress: 0.5,
          parent: 6, //父任务id
          person: "李四",
          status: 2,
          color: "#52c41a",
          type: 2,
        },
        {
          id: 101,
          text: "任务1-2",
          start_date: "2023-01-11",
          end_date: "2023-01-20",
          progress: 1,
          parent: 6, //父任务id
          person: "小明",
          status: 2,
          color: "#52c41a",
        },
        {
          id: 102,
          text: "任务1-3",
          start_date: "2023-01-21",
          end_date: "2023-01-28",
          progress: 1,
          parent: 6, //父任务id
          person: "张三",
          status: 2,
          color: "#52c41a",
        },
        {
          id: 103,
          text: "任务1-4",
          start_date: "2023-01-29",
          end_date: "2023-01-31",
          progress: 1,
          parent: 6, //父任务id
          person: "小海",
          status: 2,
          color: "#52c41a",
        },
        {
          id: 104,
          text: "任务1-4",
          start_date: "2023-02-01",
          end_date: "2023-02-20",
          progress: 1,
          parent: 6, //父任务id
          person: "小海",
          status: 2,
          color: "#52c41a",
        },
        {
          id: 105,
          text: "任务1-4",
          start_date: "2023-02-21",
          end_date: "2023-02-28",
          progress: 1,
          parent: 6, //父任务id
          person: "小海",
          status: 2,
          color: "#52c41a",
        },
        {
          id: 106,
          text: "任务1-4",
          start_date: "2023-03-01",
          end_date: "2023-03-10",
          progress: 1,
          parent: 6, //父任务id
          person: "小海",
          status: 2,
          color: "#52c41a",
        },
        {
          id: 107,
          text: "任务1-4",
          start_date: "2023-03-01",
          end_date: "2023-03-30",
          progress: 1,
          parent: 6, //父任务id
          person: "小海",
          status: 2,
          color: "#52c41a",
        },
        {
          id: 108,
          text: "任务1-4",
          start_date: "2023-04-01",
          end_date: "2023-04-20",
          progress: 1,
          parent: 6, //父任务id
          person: "小海",
          status: 2,
          color: "#52c41a",
        },
        {
          id: 109,
          text: "任务1-4",
          start_date: "2023-04-21",
          end_date: "2023-05-20",
          progress: 1,
          parent: 6, //父任务id
          person: "6666",
          status: 2,
          color: "#52c41a",
        },
      ],
    },
  ]

  // const data = [
  //   {
  //     id: 1,
  //     text: "任务1",
  //     start_date: "2022-12-01",
  //     end_date: "2022-12-20",
  //     progress: 1,
  //     person: "张三",
  //     status: 1,
  //   },
  //   {
  //     id: 2,
  //     text: "vue项目",
  //     start_date: "2022-12-10",
  //     end_date: "2022-12-22",
  //     progress: 1,
  //     person: "张三",
  //     status: 1,
  //   },
  //   {
  //     id: 3,
  //     text: "react项目",
  //     start_date: "2022-12-02",
  //     end_date: "2022-12-31",
  //     progress: 1,
  //     person: "张三",
  //     status: 1,
  //     children: [
  //       {
  //         id: 41,
  //         text: "react1",
  //         start_date: "2022-12-02",
  //         end_date: "2022-12-10",
  //         progress: 1,
  //         parent: 3, //父任务id
  //         person: "小海",
  //         status: 2,
  //         color: "#1890ff",
  //       },
  //       {
  //         id: 42,
  //         text: "react2",
  //         start_date: "2022-12-10",
  //         end_date: "2022-12-31",
  //         progress: 0.3,
  //         parent: 3, //父任务id
  //         person: "小海",
  //         status: 2,
  //         color: "#1890ff",
  //       },
  //     ],
  //   },
  // ]
  task = extractTaskTree(data, "children")
  links.value = extractLinks(data)
}, 1000 * 1)

const extractTaskTree = (arrs: Array<TaskItem>, childs: string, attrArr?: any): any => {
  let attrList: Array<any> = []
  if (!Array.isArray(arrs) && !arrs.length) return []
  if (typeof childs !== "string") return []
  if (!Array.isArray(attrArr) || (Array.isArray(attrArr) && !attrArr.length)) {
    attrList = Object.keys(arrs[0])
    attrList.splice(attrList.indexOf(childs), 1)
  } else {
    attrList = attrArr
  }
  let list: Array<any> = []
  const getObj = (arr: TaskItem[], parent?: string | number) => {
    arr.forEach(function (row: TaskItem) {
      let obj: any = {}
      attrList.forEach(item => {
        obj[item] = row[item]
        //有子任务，那么当前父任务进度条颜色为灰色
        if (row[childs]) obj.color = "#ebeef5"

        //讲进度转为百分数进行展示
        if (item === "progress") {
          obj.progressText = `${obj.progress * 100}%`
          console.log(1)
        }
        if (item === "type") {
          obj.typeText = `${typeObj[obj.type]}`
          console.log(1)
        }

        if (parent) {
          //设置父任务id
          obj.parent = parent

          //进度条颜色处理
          if (row.progress === 1) {
            obj.color = "#52c41a"
            console.log(11)
          } else {
            obj.color = "#1890ff"
          }
        }
      })
      list.push(obj)
      if (row[childs]) getObj(row[childs], row.id) //父任务id值就是子任务parent的值
    })
    return list
  }
  return getObj(arrs)
}

//任务进度连线
const extractLinks = (arrs: Array<TaskItem>, childs = "children", type = 0) => {
  if (!Array.isArray(arrs) || !arrs.length) return []
  if (typeof childs !== "string") return []
  let list: Array<LinkItem> = []
  const getObj = function (arr: Array<TaskItem>) {
    arr.forEach((v: TaskItem): void => {
      const children = v?.children || []
      if (children.length > 1) {
        children.forEach((row: TaskItem, j: number) => {
          if (children[j + 1]) {
            let source = children[j]["id"]
            let target = children[j + 1]["id"]
            const link: LinkItem = {
              id: uuidv4(),
              source,
              target,
              type,
            }
            list.push(link)
          }
          if (row[childs]) getObj(row[childs])
        })
      }
    })
    return list
  }
  return getObj(arrs)
}
</script>

<style></style>
